// 分类模块
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
import { findTopCategory } from '@/api/category'
export function useCategory () {
  // 如何获取路由参数？ this.$route
  const route = useRoute() // route === this.$route
  const categoryData = ref({})
  const fetchCategory = async (id) => {
    const res = await findTopCategory(id)
    console.log(res)
    categoryData.value = res.result
  }
  fetchCategory(route.params.id)
  // 精确控制: 在路由切换id的时候只把我们需要调用的接口调用起来更新数据
  // 依旧保持路由缓存是存在的 不被破坏
  onBeforeRouteUpdate((to) => {
    console.log('路由更新了', to)
    // 重新发送请求 to.params.id
    fetchCategory(to.params.id)
  })

  return {
    categoryData
  }
}
